<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="container"></div>
<script src="mustache.js"></script>
<script type="text/template" id="myTemplate">
    <ul>
        {{#arr}}
        <li>
            <div class="hd">{{name}}的基本信息</div>
            <div class="bd">
                <p>姓名：{{name}}</p>
                <p>年龄：{{age}}</p>
                <p>性别：{{sex}}</p>
                <p>爱好：
                <ol>
                    {{#hobbies}}
                    <li>{{.}}</li>
                    {{/hobbies}}
                </ol>
                </p>
            </div>
        </li>
        {{/arr}}
    </ul>
</script>
<script>
    const templateStr = document.querySelector("#myTemplate").innerHTML;

    const data = {
        arr: [
            {name: "小明", age: 12, sex: "男", hobbies: ["游泳", '潜水', '画画']},
            {name: "小红", age: 11, sex: "女", hobbies: ["篮球", '足球']},
            {name: "小强", age: 13, sex: "男", hobbies: ["跑步"]},
        ]
    };

    const container = document.querySelector('#container');
    const strDom = Mustache.render(templateStr, data);

    container.innerHTML = strDom;
</script>

<script>
    const template = '<h1>我买了一个{{thing}},好{{mood}}</h1>';
    const data1 = {
        thing: '华为手机',
        mood: '开心'
    };

    function render(template, data) {
        return template.replace(/\{\{(\w+)\}\}/g, (findStr, $1) => {
            return data[$1];
        });
    }

    console.log(render(template, data1));;
</script>
</body>
</html>